<style lang="less">
    @import "../../../../styles/common.less";
</style>

<template>
    <div @click="closeLayer" class="peak-wapper">
        <Row :gutter="10">
            <Col span="17">
                <Card dis-hover :bordered="false">
                    <p slot="title">
                        表单数据
                    </p>
                    <Card dis-hover :bordered="false" :padding="0" class="form-card">
                        <Form ref="formDataView" :model="formData" :rules="formDataRule" :label-width="80" label-position="right">
                            <Row>
                                <Col span="12">
                                    <FormItem label="角色名称" prop="roleName" class="form-item">
                                        <Input v-model="formData.roleName" placeholder="请输入角色名称">
                                        </Input>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                <FormItem label="所属部门" class="form-item">
                                    <!--封装文本树形结构-->
                                    <div class="input-tree">
                                        <div class="ivu-input" :class="selectDeptTip?'redline':''" placeholder="请选择所属部门"  @click="selectDept">{{selectDeptTxt}}</div>
                                        <div class="ivu-form-item-error-tip" v-show="selectDeptTip">所属部门不能为空</div>
                                        <div class="tree-wapper" v-show="DeptTree" @click="stopDefault">
                                            <Tree ref="DeptTree" :data="deptData" @on-select-change="selectChangeDept"></Tree>
                                        </div>
                                    </div>
                                </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="12">
                                    <FormItem label="是否可用" :required="true" class="form-item" prop="usEnable">
                                        <Select v-model="formData.usEnable" placeholder="请选择">
                                            <Option v-for="item in isUseableList" :value="item.value" :key="item.label">{{item.label}}</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem label="备注" class="form-item" prop="remarks">
                                        <Input v-model="formData.remarks" placeholder="请输入备注">
                                        </Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    <Card dis-hover :bordered="false">
                        <Row :gutter="20">
                            <Col span="12">
                                <Card dis-hover :bordered="false">
                                    <p slot="title">功能权限</p>
                                    <Tree :data="permTreeList"
                                          show-checkbox
                                          ref="permTree"
                                          @on-check-change="changePermNotes"
                                    ></Tree>
                                </Card>
                            </Col>
                            <Col span="12">
                                <Card dis-hover :bordered="false">
                                    <p slot="title">数据权限</p>
                                    <Tree :data="dataPermList"
                                          show-checkbox
                                          ref="dataPermTree"
                                          @on-check-change="changeDataPermNotes"
                                    ></Tree>
                                </Card>
                            </Col>
                        </Row>
                    </Card>
                </Card>
            </Col>
            <Col span="7">
                <Card dis-hover :bordered="false">
                    <p slot="title">
                        数据操作
                    </p>
                    <div style="text-align: right" v-if="!Boolean(id)">
                        <Button type="primary" @click="handleSaveRole('formDataView')">保存</Button>
                        <Button type="ghost" @click="handleReset('formDataView')">重置</Button>
                    </div>
                    <div style="text-align: right" v-else>
                        <Button type="primary" @click="handleUpdateRole('formDataView')">修改</Button>
                        <Button type="ghost" @click="handleBackHome('formDataView')">返回</Button>
                    </div>
                </Card>
            </Col>
        </Row>

    </div>
</template>

<script>
  import { fetchGetData,fetchPostData,adminUrl } from '@/libs/fetch.js'
  import util from '@/libs/util.js'
  import qs from 'qs';
  export default {
    name: 'addRole',
    data () {
      return {
        id:this.$route.query.id,
        permTreeList: [],
        allPermTreeList: [],
        dataPermList: [],
        allDataPermList: [],
        //模拟下拉树begin
        DeptTree:false,
        selectDeptTip:false,
        selectDeptTxt:'',
        selectDeptNode:false,
        //模拟下拉树end
        formData:{
          roleName:'',
          deptId:'',
          remarks:'',
          usEnable:'',
          permIds:[],
          dataPermIds:[]
        },
        isUseableList: [{
          value: '1',
          label: '是'
        },{
          value: '0',
          label: '否'
        }],
        formDataRule:{
          roleName: [
            { required: true, message: '角色名称不能为空', trigger: 'blur'}
          ],
          usEnable: [
            { required: true, message: '是否可用不能为空', trigger: 'change'}
          ],
          remarks: []
        },
        deptData:[]
      };

    },
    methods: {
      //模拟下拉树begin
      closeLayer(){
        if(this.DeptTree){
          this.DeptTree=false;
        }
        if(this.selectDeptNode){
          if(this.selectDeptTxt==''){
            this.selectDeptTip=true;
          }else{
            this.selectDeptTip=false;
          }
        }
      },
      selectChangeDept(){
        let res=util.mapTreeChild(this.$refs.DeptTree.getSelectedNodes());
        this.selectDeptTxt=res.resvalue;
        this.formData.deptId=res.reskey[0];
      },
      selectDept(event){//选择部门
        event.preventDefault();
        event.stopPropagation();
        this.DeptTree=true;
        this.selectDeptNode=true;
      },
      stopDefault(event){//点击遮罩 阻止事件传播
        event.preventDefault();
        event.stopPropagation();
        return false;
      },
      //选择功能权限
      changePermNotes(){
        let res=util.mapTreeFlat(this.$refs.permTree.flatState);
        this.formData.permIds=res.reskey;
      },
      //选择数据权限
      changeDataPermNotes(){
        let res=util.mapTreeChild(this.$refs.dataPermTree.getCheckedNodes());
        this.formData.dataPermIds=res.reskey;
      },
      handleSaveRole(name){
        if(this.selectDeptTxt==''){
          this.selectDeptTip=true;
        }
        if(this.formData.permIds.length < 1){
          this.$Message.error('功能权限不能为空');
          return;
        }
        if(this.formData.dataPermIds.length < 1){
          this.$Message.error('数据权限不能为空');
          return;
        }
        this.$refs[name].validate((valid) => {
          if (valid) {
            if(this.selfValid()){
              fetchPostData(adminUrl+'/admin/role/add',this.formData)
                .then(data=>{
                  if(data.status==1){
                    let _that=this;
                    this.$Notice.success({
                      title: data.message,
                      duration:2,
                      onClose:function () {
                        util.closeCurrentTag(_that,_that.$route.name,'role');
                      }
                    })
                  }else{
                    this.$Notice.error({
                      title: '保存失败',
                      desc: data.message,
                      duration:0
                    });
                  }
                });
            }
          } else {
            this.$Message.error('信息输入有误!');
          }
        })
      },
      handleReset(name){
        this.$refs[name].resetFields();
        this.selectDeptTxt = '';
        this.selectDeptTip = false;
        this.permTreeList = util.deepcopy(this.allPermTreeList);
        this.dataPermList = util.deepcopy(this.allDataPermList);
      },
      handleUpdateRole(name){
        if(this.selectDeptTxt==''){
          this.selectDeptTip=true;
        }
        this.changePermNotes();
        this.changeDataPermNotes();
        if(this.formData.permIds.length < 1){
          this.$Message.error('功能权限不能为空');
          return;
        }
        if(this.formData.dataPermIds.length < 1){
          this.$Message.error('数据权限不能为空');
          return;
        }
        let formData = this.formData;
        formData['roleId'] = this.id;
        this.$refs[name].validate((valid) => {
          if (valid) {
            if(this.selfValid()){
              fetchPostData(adminUrl+'/admin/role/update',formData)
                .then(data=>{
                  if(data.status==1){
                    let _that=this;
                    this.$Notice.success({
                      title: data.message,
                      duration:2,
                      onClose:function () {
                        util.closeCurrentTag(_that,_that.$route.name,'role');
                      }
                    })
                  }else{
                    this.$Notice.error({
                      title: '保存失败',
                      desc: data.message,
                      duration:0
                    });
                  }
                });
            }
          } else {
            this.$Message.error('信息输入有误!');
          }
        })
      },
      handleBackHome(){
        util.closeCurrentTag(this,this.$route.name,'role');
      },
      selfValid(){
        if(this.selectDeptTxt==''){
          this.selectDeptTip=true;
          return false;
        }
        return true;
      }
    },
    created(){
      util.setNavTitle(this,util.getComTitle(this.id,0,'角色'));
      if(this.id){
        fetchGetData(adminUrl+'/admin/role/detail/'+this.id,{}).then(data=>{
          if(data.status==1){
            this.formData=data.data;
            this.selectDeptTxt=this.formData.deptName;
          }else{
            this.$Message.error(data.message);
          }
        });
      }
      fetchGetData(adminUrl+'/admin/dept/query',{roleId:this.id}).then(data=>{
        if(data.status==1){
          this.deptData=data.data;
        }else{
          this.$Message.error(data.message);
        }
      });
      fetchGetData(adminUrl+'/admin/role/permTree',{roleId:this.id}).then(data=>{
        if(data.status==1){
          this.allPermTreeList = data.data;
          this.permTreeList = util.deepcopy(data.data);
        }else{
          this.$Message.error(data.message);
        }
      });
      fetchGetData(adminUrl+'/admin/role/dataPermTree',{roleId:this.id}).then(data=>{
        if(data.status==1){
          this.allDataPermList = data.data;
          this.dataPermList = util.deepcopy(data.data);
        }else{
          this.$Message.error(data.message);
        }
      });
    }
  };
</script>